<template>
<div class="box">
  <div class="header">
       <div class="fh" @click="gouh()">
       <van-icon name="wap-home-o" color="#fff" size="20px" margin-top="1px" margin-left="3px"/>
       </div>
      <img src="http://wxb.cmcmall.com.cn/wxb_image/carousel/sales-carousel-1.jpg" />
       <div class="wd" @click="gouw()"><van-icon name="wap-nav" color="#000" size="20px" margin-top="1px" margin-left="3px"/></div>
  </div>

  <div class="content" v-for="(item, index) of this.cxList" :key="index">
     <div class="cximg">
       <img src="http://h5.cmcmall.com.cn/resources/2B/category/first_category/02.jpg" alt="">
     </div>
     <div class="cxlist">
       <ul>
         <li v-for="(item, index) of item.data" :key="index"  @click="toDetail(item.kindid)">
           <div class="img">
             <img :src="item.picPath" alt="">
           </div>
           <span>{{ item.Drugname }}</span>
           <h4>采购价</h4>
           <p>{{'￥' + item.price}}</p>
         </li>
       </ul>
     </div>
  </div>
  <Back2 />
</div>
</template>
<script>
import Vue from 'vue'
import Back2 from '@/components/Back2'
import { proall, kindAll } from '@/utils/api'
import { Icon } from 'vant'
Vue.use(Icon)
export default {
  components: {
    Back2
  },
  data () {
    return {
      kindList: [],
      cxList: []
    }
  },
  created () {
    proall().then(data => {
      // console.log(data.classifySonBean[2])
      this.kindList = data.classifyBean
      // console.log(this.kindList[2].picPath)
    })
    kindAll().then(data => {
      console.log(data.data)
      this.cxList = data.data
      console.log(this.cxList[2].data[2].picPath)
    })
  },
  methods: {
    toDetail (kindid) {
      this.$router.push('/detail?kindid=' + kindid)
    },
    gouh () {
      this.$router.push('/home')
    },
    gouw () {
      this.$router.push('/user')
    }
  }
}
</script>
<style lang="scss" scoded>
.box {
  overflow-y: auto;
  .header {
    background: #333;
    width: 100%;
    margin-bottom: .25rem;
    .fh {
      position: absolute;
      width: 25px;
      height: 25px;
      background: rgba(102, 102, 102, 0.6);
      border-radius: 25px;
      top: 10px;
      left: 10px;
    }
    .wd {
      position: absolute;
      width: 25px;
      height: 25px;
      background: rgba(102, 102, 102, 0.6);
      border-radius: 25px;
      top: 10px;
      right: 10px;
    }
    img {
        width: 100%;
        height: 1.9rem;
    }
  }
  .content {
    height: auto;
    margin-bottom: .25rem;
    background: #fff;
    font: inherit;
    display: block;
    .cximg {
      height: 100%;
      width: 100%;
      width: 100%;
      img {
        width: 100%;
        height: 1.44rem;
      }
    }
    .cxlist {
      width: 360px;
      padding: 5px;
      font-size: 14px;
      overflow: scroll;
      position: relative;
      height: 193px;
      ul {
        width: 650%;
        padding: 10px;
        height: 183px;
        position: absolute;
        font: inherit;
        li {
          float: left;
          width: 96px;
          overflow: hidden;
          margin-right: 15px;
          vertical-align: top;
          display: block;
          height: 165px;
          .img {
            padding: 10px;
            width: 96px;
            height: 96px;
            justify-content: center;
            align-items: center;
            max-width: 100%;
            img {
              max-width: 86px;
              max-height: 86px;
              width: 86px;
            }
          }
          span {
            display: block;
            margin-top: 3px;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
          }
          h4 {
            margin-top: 3px;
            text-align: center;
            color: #f63030;
          }
          p {
            margin-top: 3px;
            text-align: center;
          }
        }
      }
    }
  }
}

</style>
